<script lang="tsx" setup>
import { NButton, useDialog, useMessage } from 'naive-ui';
import { toRefs } from 'vue';
import dayjs from 'dayjs';
import { forceLogout, getPageList } from '@/service/api/monitor/online';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import { useDict } from '@/utils/dict';
import DictTag from '@/components/custom/dict-tag.vue';
import OnelineSearch from './components/online-search.vue';
// import ConfigSearch from './components/config-search.vue';
const { sys_yes_no, sys_device_type } = toRefs<any>(useDict('sys_yes_no', 'sys_device_type'));
const appStore = useAppStore();
const dialog = useDialog();
const message = useMessage();
const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: getPageList,
  showTotal: true,
  apiParams: {
    pageNum: 1,
    pageSize: 10,
    ipaddr: null,
    userName: null
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      key: 'tokenId',
      title: '会话编号',
      align: 'center',
      minWidth: 100,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'userName',
      title: '登录名称',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'clientKey',
      title: '客户端',
      align: 'center',
      minWidth: 100,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'deviceType',
      title: '设备类型',
      align: 'center',
      render: row => {
        return <DictTag dicts={sys_device_type.value} type="text" value={row.deviceType} />;
      }
    },
    {
      key: 'deptName',
      title: '所属部门',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'ipaddr',
      title: '主机',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'loginLocation',
      title: '登录地点',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'os',
      title: '操作系统',
      align: 'center',
      minWidth: 100,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'browser',
      title: '浏览器',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'loginTime',
      title: '登录时间',
      align: 'left',
      minWidth: 100,
      render: row => <div>{dayjs(row.loginTime).format('YYYY-MM-DD HH:mm:ss')}</div>
    },
    {
      key: 'operate',
      title: $t('common.operate'),
      align: 'center',
      fixed: 'right',
      width: 130,
      render: row => (
        <div class="flex-center gap-8px">
          <NButton
            quaternary
            type="primary"
            ghost
            size="small"
            onClick={() => {
              handleForceLogout(row?.tokenId);
            }}
          >
            强退
          </NButton>
        </div>
      )
    }
  ]
});
const handleForceLogout = (tokenId: string) => {
  dialog.warning({
    title: '警告',
    content: '你确定退出该用户吗',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { error, data } = await forceLogout(tokenId);
      if (!error) {
        message.success(data?.msg);
        getData();
      }
      // message.success('确定');
    },
    onNegativeClick: () => {
      message.error('取消强退');
    }
  });
};
const {
  drawerVisible,
  operateType,
  editingData,
  handleAdd,
  handleEdit,
  checkedRowKeys,
  onBatchDeleted,
  onDeleted
  // closeDrawer
} = useTableOperate(data, getData);
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <OnelineSearch v-model:model="searchParams" :sys-yes-no="sys_yes_no" @reset="resetSearchParams" @search="getData" />
    <NCard title="在线用户" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :is-oper="true"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @add="handleAdd"
          @refresh="getData"
        ></TableHeaderOperation>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.tokenId"
        :pagination="mobilePagination"
        class="sm:h-full"
      >
        <template #empty>
          <Empty />
        </template>
      </NDataTable>
    </NCard>
  </div>
</template>

<style scoped></style>
